<template>
  <div class="app">
    <el-dialog
      :title="formData.id ? '编辑学科':'添加学科' "
      :visible="dialogVisible"
      width="40%"
      @close="btncarle"
    >
      <el-form ref="dialog" :model="formData" :rules="rules">
        <el-form-item label="学科名称" label-width="20%" prop="subject_name">
          <el-input v-model="formData.subject_name" placeholder="请输入学科名称" />
        </el-form-item>
        <el-form-item label="排序" label-width="20%" prop="sort">
          <el-input-number v-model="formData.sort" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="是否显示" label-width="20%" prop="is_show">
          否
          <el-switch
            v-model="formData.is_show"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          />是
        </el-form-item>
        <el-form-item label="学科图标" label-width="20%">
          <ImageUpload @one="change" />
        </el-form-item>
        <el-form-item class="item">
          <el-button @click="btncarle">取消</el-button>
          <el-button type="primary" @click="addsubject">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addsubject, editsubject, editsubjectitem } from '@/api/subject'
import ImageUpload from './ImageUpload'
export default {
  name: 'Dialog',
  components: {
    ImageUpload
  },
  props: {
    id: {
      type: Number,
      request: true
    }
  },
  data() {
    return {
      // 表单数据
      dialogVisible: false, // 弹出框
      formData: {
        subject_name: '', // 学科名
        sort: 0, // id
        is_show: 1, // 开关
        subject_icon: ''
      },
      rules: {
        subject_name: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    };
  },
  props: {
    id: {
      type: Number,
      request: true
    }
  },
  methods: {
    async addsubject() {
      if (this.formData.id) {
        // 编辑
        await editsubjectitem({
          ...this.formData,
          id: this.id
        })
        this.$message.success('更新成功')
      } else {
        // 添加
        await addsubject(this.formData)
        this.$message.success('添加成功')
      }
      this.formData = {
        subject_name: '', // 学科名
        sort: 0, // id
        is_show: 1, // 开关
        subject_icon: ''
      }
      // 更新页面
      this.$emit('notice')
      // 关闭弹层
      this.dialogVisible = false
    },
    async editsubject(id) {
      const { data } = await editsubject(id)
      console.log(data, 222)
      this.formData = data
    },
    btncarle() {
      this.formData = {
        subject_name: "", //学科名
        sort: 0, //id
        is_show: 1, //开关
        subject_icon: ""
      };
      this.dialogVisible = false;
    },
    change(value) {
      console.log(value);
      this.formData.subject_icon = value;
      console.log(this.formData.subject_icon, 11111);
    }
  }
}
</script>

<style scoped>
.el-dialog__header {
  border: 1px solid #f5f7fa;
}
.item {
  display: flex;
  justify-content: flex-end;
}
</style>
